<!--  -->
<template>
  <div class="purchase">
    <div class="header">
      <van-icon name="arrow-left" size="18" @click="goBack()" />
      <p>求租</p>
      <span></span>
    </div>
    <div class="content">
      <div class="classify">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            @change="changeType(value1)"
          />
          <van-dropdown-item
            v-model="value2"
            :options="option2"
            @change="changeAddress(value2)"
          />
        </van-dropdown-menu>
      </div>
      <dl v-for="(item, idx) in list" :key="idx" class="list">
        <dd>
          <p>{{ item.name }}</p>
          <p>{{ item.time }}</p>
        </dd>
        <dd>{{ item.title }}</dd>
        <dd>
          <p>
            <span>意向区域：{{ item.address }}&nbsp;</span>
            <span
              >意向价格：<b>{{ item.num }}/月</b></span
            >
          </p>
          <p>
            <van-icon name="chat-o" />
            <van-icon name="phone-o" />
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { getWantedList, getChooseType, getChooseAddress } from "@/api";
export default {
  // 组件状态值
  data() {
    return {
      list: [],
      value1: "房产类型",
      value2: "区域选择",
      option1: [
        { text: "房产类型", value: "房产类型" },
        { text: "别墅", value: "别墅" },
        { text: "高层住宅", value: "高层住宅" },
      ],
      option2: [
        { text: "区域选择", value: "区域选择" },
        { text: "徐汇区", value: "徐汇区" },
        { text: "嘉定区", value: "嘉定区" },
        { text: "虹口区", value: "虹口区" },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 组件方法
  methods: {
    //返回上一级
    goBack() {
      this.$router.push("/");
    },
    //获取数据
    async getList() {
      const res = await getWantedList();
      console.log(res);
      this.list = res.data.data;
    },
    //筛选房型
    changeType(value) {
      getChooseType({ value: value }).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.getList();
        } else {
          this.list = res.data.data;
        }
      });
    },
    //删选区域
    changeAddress(value) {
      getChooseAddress({ value: value }).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.getList();
        } else {
          this.list = res.data.data;
        }
      });
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.purchase {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  color: #fff;
  background: #4381e6;
  padding: 0 15px;
}
.content {
  flex: 1;
  overflow: auto;
  background: #eee;
}
.list {
  width: 100%;
  padding: 10px 15px;
  margin: 10px 0;
  background: #fff;
  dd:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p:nth-child(2) {
      color: #999;
      font-size: 13px;
    }
  }
  dd:nth-child(2) {
    line-height: 30px;
  }
  dd:nth-child(3) {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    align-items: center;
    b {
      color: orange;
      font-weight: normal;
    }
    .van-icon {
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50%;
      font-weight: bold;
      color: red;
      background: rgba(255, 0, 0, 0.2);
      margin-right: 10px;
    }
  }
}
</style>
